<template>
  <div v-if="hackReset" class="cockpit-frame" @click="closeMenu">
    <Navigation
      ref="menu"
      class="cockpit-nav"
      :data="menu"
      @click="openMenu($event)"
    />

    <router-view
      v-if="isComponent"
      :title="title"
      class="cockpit-content"
      @click="closeMenu"
    />
    
    <iframe
      v-else-if="linkUrl1"
      frameborder="0"
      scrolling="no"
      style="z-index: 1"
      class="cockpit-iframe"
      :src="linkUrl1"
      @click="closeMenu"
    />

    <div v-if="transFlag" class="cockpit-trans" @click="closeMenu" />
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex";
import { setInterval } from "timers";
// import Windows from '@components/HelloWorld.vue'
export default {
  name: "Cockpit",
  components: {
    Navigation: () => import("@components/Navigation.vue"),
    // eslint-disable-next-line vue/no-unused-components
    // Windows: () => import('@components/HelloWorld.vue'),
    // eslint-disable-next-line vue/no-unused-components
    // Web: () => import('@view/web/Web.vue')
  },
  props: {},
  data() {
    return {
      transFlag: false,
      data: {},
      hackReset: true,
      title: "",
      reciveVoice: {
        path: "LargeScreen",
        title: "智能化大屏",
      },
    };
  },
  computed: {
    ...mapState({
      component: (state) => state.component.component,
      menuList: (state) => state.userProfile.menuList,
      webSocketCommand: (state) => state.webSocket.webSocketCommand,
    }),
    ...mapGetters({
      router: "router",
      menu: "userProfile/menu",
    }),
    // 是否显示404页面
    // is404() {
    //   if (this.isComponent) {
    //     if (this.data.relation_flag === null) {
    //       return false
    //     } else {
    //       return !(this.componentId || this.hasChildren)
    //     }
    //   } else {
    //     return !this.linkUrl
    //   }
    // },

    // true-内部组件,false-外部链接
    isComponent() {
      // console.log(this.data , "1231");
      return (
        this.data &&
        this.data.info &&
        this.data.info.componentFlag &&
        this.data.info.componentFlag.trim() &&
        this.data.info.componentFlag.trim().toLowerCase() === "true"
      );
    },
    // 外部链接地址
    linkUrl1() {
      // return this.data &&
      // this.data.info &&
      // this.data.info.outLinkBaseUrl &&
      // this.data.info.outLinkBaseUrl.trim() &&
      // this.data.info.linkUrl &&
      // this.data.info.linkUrl.trim()
      // ? this.data.info.outLinkBaseUrl.trim() + this.data.info.linkUrl.trim()
      // : null;
      // console.log("linkUrl", this.data);
      // replace(/192.168.65.15/, "localhost")
      if (
        this.data &&
        this.data.info &&
        this.data.info.outLinkBaseUrl &&
        this.data.info.outLinkBaseUrl.trim() &&
        this.data.info.linkUrl &&
        this.data.info.linkUrl.trim()
      ) {
        console.log(this.data.info);
        if (this.data.info.outLinkBaseUrl.trim().indexOf("8000") != -1) {
          return (
            this.data.info.outLinkBaseUrl
              .trim()
              .replace(/192.168.65.15:8000/, "192.168.65.15:8000") +
            this.data.info.linkUrl.trim()
            // this.data.info.outLinkBaseUrl
            //   .trim()
            //   .replace(/192.168.65.15:8000/, "10.109.88.193:9080") +
            // this.data.info.linkUrl.trim()
          );
        } else if (this.data.info.outLinkBaseUrl.trim().indexOf("8004") != -1) {
          return (
            this.data.info.outLinkBaseUrl
              .trim()
              .replace(/192.168.65.15:8004/, "192.168.65.15:8004") +
            this.data.info.linkUrl.trim()
            // this.data.info.outLinkBaseUrl
            //   .trim()
            //   .replace(/192.168.65.15:8004/, "10.109.88.193:8004") +
            // this.data.info.linkUrl.trim()
          );
        } else if (
          this.data.info.outLinkBaseUrl.trim().indexOf("32000") != -1
        ) {
          return (
            // this.data.info.outLinkBaseUrl
            //   .trim()
            //   .replace(/192.168.65.22/, "10.109.88.193") +
            // this.data.info.linkUrl.trim()
            this.data.info.outLinkBaseUrl
              .trim()
              .replace(/192.168.65.22/, "192.168.65.22") +
            this.data.info.linkUrl.trim()
          );
        }

        //主变压器BIM模型
        else if (this.data.info.linkUrl.trim().indexOf("8006") != -1) {
          console.log(this.data.info, "主变压器BIM模型");
          return (
            this.data.info.outLinkBaseUrl
              .trim()
              .replace(/192.168.65.15:8080/, "192.168.65.15") +
            this.data.info.linkUrl.trim()
            // this.data.info.outLinkBaseUrl
            //   .trim()
            //   .replace(/192.168.65.15:8080/, "10.109.88.193") +
            // this.data.info.linkUrl.trim()
          );
        }
        //MAU-BIM模型
        else if (this.data.info.linkUrl.trim().indexOf("8001") != -1) {
          console.log(this.data.info, "BIM模型");
          return (
            this.data.info.outLinkBaseUrl
              .trim()
              .replace(/192.168.65.15:8080/, "192.168.65.15") +
            this.data.info.linkUrl.trim()
            // this.data.info.outLinkBaseUrl
            //   .trim()
            //   .replace(/192.168.65.15:8080/, "10.109.88.193") +
            // this.data.info.linkUrl.trim()
          );
        } else if (this.data.info.outLinkBaseUrl.trim().indexOf("8080") != -1) {
          return (
            this.data.info.outLinkBaseUrl
              .trim()
              .replace(/192.168.65.15:8080/, "10.109.88.193:8866") +
            this.data.info.linkUrl.trim()
          );
        }
      } else {
        return this.data &&
          this.data.info &&
          this.data.info.outLinkBaseUrl &&
          this.data.info.outLinkBaseUrl.trim() &&
          this.data.info.linkUrl &&
          this.data.info.linkUrl.trim()
          ? this.data.info.outLinkBaseUrl.trim() + this.data.info.linkUrl.trim()
          : null;
      }
    },
    // 内部组件
    componentId() {
      const component =
        this.data &&
        this.data.info &&
        this.data.info.componentId &&
        this.data.info.componentId.trim() &&
        this.data.info.componentFile &&
        this.data.info.componentFile.trim()
          ? this.data.info.componentId.trim()
          : null;
      // console.log(component, "路由跳转");
      return component && this.component[component] ? component : null;
    },
  },
  watch: {
    reciveVoice(val, oldVal) {
      if (!val.isLink) {
        this.$router.push({ name: val.path });
        this.title = val.title;
      } else {
        this.data.info = val.info;
      }
    },
    router(val, oldVal) {
      this.$router.addRoutes(val);
    },
    menu(val, oldVal) {
      this.openMenu(
        this.menuList.find((item) => item.id === "menuLargeScreen")
      );
    },
    webSocketCommand(val, oldVal) {
      // console.log("val", val.path, "oldVal", oldVal);
      if (val && val.path) {
        this.openMenu(this.menuList.find((item) => item.id === val.path));
        // this.$router.push({ name: val.path })
      }
    },
  },
  mounted() {
    this.changeKey();
  },
  updated() {
    this.changeKey();
  },
  created() {
    this.init();
    this.handdleMsg();
  },
  methods: {
    handdleMsg(msg) {
      // let iframe1 = document.getElementById("iframe");
      // console.log(iframe1, "跳转");
      // setInterval(()=>{
      //   this.reciveVoice={
      //     path:'IceSystem',
      //     title:'冰水系统概览'
      //   }
      // },4000)
      let that = this;
      // console.log(that.$global.ws, "999999999999");
      if (that.$global.ws && that.$global.ws.readyState == 1) {
        // console.log("发送信息", msg);
        that.$global.ws.send(msg);
      }
      that.$global.ws.onmessage = function (res) {
        // console.log(res.data,'测试数据')

        var msgObj = JSON.parse(res.data);
        console.log("收到服务器内容", msgObj.msg);

        if (msgObj.msg.indexOf("冰水系统") != -1) {
          that.reciveVoice = {
            path: "IceSystem",
            title: "冰水系统概览",
            isLink: false,
          };
        } else if (msgObj.msg.indexOf("电力系统") != -1) {
          that.reciveVoice = {
            path: "PowerAndLoad",
            title: "电力系统概览",
            isLink: false,
          };
        } else if (msgObj.msg.indexOf("CDA系统") != -1) {
          that.reciveVoice = {
            path: "CDAsystem",
            title: "空气压缩机系统概览",
            isLink: false,
          };
        } else if (msgObj.msg.indexOf("水平衡情况") != -1) {
          that.reciveVoice = {
            info: {
              outLinkBaseUrl: "http://192.168.65.15:8000/",
              linkUrl: "SR-03-04 水平衡.html",
            },
            isLink: true,
          };
        } else if (msgObj.msg.indexOf("废水系统") != -1) {
          that.reciveVoice = {
            info: {
              outLinkBaseUrl: "http://192.168.65.15:8000/",
              linkUrl: "SR-02-07 废水系统.html",
            },
            isLink: true,
          };
        } else if (msgObj.msg.indexOf("新风系统") != -1) {
          that.reciveVoice = {
            path: "MAUEquipmentComparison",
            title: "新风系统",
            isLink: false,
          };
        } else if (msgObj.msg.indexOf("工厂侧总览") != -1) {
          that.reciveVoice = {
            path: "FactoryOverview",
            title: "工厂侧总览",
            isLink: false,
          };
        } else if (msgObj.msg.indexOf("冰机设备对比") != -1) {
          that.reciveVoice = {
            path: "IceEquipmentComparison",
            title: "同类型设备对比-冰机",
            isLink: false,
          };
        } else if (msgObj.msg.indexOf("CDA设备对比") != -1) {
          that.reciveVoice = {
            path: "CDAEquipmentComparison",
            title: "同类型设备对比-空气压缩机",
            isLink: false,
          };
        } else if (msgObj.msg.indexOf("原理简介") != -1) {
          that.reciveVoice = {
            path: "IntroductionOfSuggestion",
            title: "空气压缩机组AI开机建议",
            isLink: false,
          };
        } else if (msgObj.msg.indexOf("智能化大屏") != -1) {
          that.reciveVoice = {
            path: "LargeScreen",
            title: "智能化大屏",
            isLink: false,
          };
        }
      };
    },
    changeKey() {
      const _this = this;
      document.onkeydown = function (e) {
        const event = window.event || e;
        const code = event.keyCode || event.which;
        if (code === 116) {
          if (event.preventDefault) {
            event.preventDefault();
          } else {
            event.keyCode = 0;
            event.returnValue = false;
          }
          return false;
        }
        if (code === 121) {
          if (event.preventDefault) {
            event.preventDefault();
          } else {
            event.keyCode = 0;
            event.returnValue = false;
          }
          _this.refresh(event);
          return false;
        }
      };
    },

    ...mapActions({
      signIn: "signIn",
    }),
    ...mapActions({
      signOut: "signOut",
    }),

    init() {
      this.$router.options.routes = this.router;
      this.$router.addRoutes(this.router);
      // console.log("init router", this.$router.options.routes);
    },

    openMenu(data) {
      console.log(data, "u二面");
      this.transFlag = true;
      if (data && !data.uid) {
        this.signIn({ homeFlag: true });
      }
      if (data.children && data.children.length > 0) {
        return;
      }
      // if (!data.uid) {
      //   return
      // }
      // console.log("cockdata", data);
      // console.log("cockROUTER", this.$router);
      this.data = data;
      if (this.isComponent) {
        // console.log(this.componentId, "999999999999999999999");
        this.$router.push({ name: this.componentId });
        
        this.title = data.name;
      }
      if (!this.isComponent && data.uid === "logout") {
        console.log("退出登录");
        this.signOut({ homeFlag: false });
      }

      // console.log(
      //   "open",
      //   data.name,
      //   "data",
      //   data,
      //   "info",
      //   data.info.componentId
      // );
      // this.$router.push({ path: `/${data.info.componentId}`, query: { flag: true }})
    },
    closeMenu() {
      // console.log(9999999);
      this.transFlag = false;
      this.$refs.menu.selectedIndex = -1;
    },
    refresh(event) {
      this.hackReset = false;
      this.$nextTick(() => {
        this.hackReset = true;
      });
    },
  },
};
</script>

<style scoped>
.cockpit-frame {
  display: flex;
  font-size: 1rem;
  overflow: auto;
  background: url("~@assets/image/frame_cockpit/background_cockpit.png")
    no-repeat center center / cover;
}
.cockpit-content {
  flex-grow: 1;
}
.cockpit-nav {
  width: 100%;
  /* width: 53%; */
  height: 7%;
  position: fixed;
  bottom: -1.7rem;
  /* margin:0 20%;
  padding: 0 3.5%; */
  z-index: 9999;
  /* background-image: url("~@assets/image/frame_cockpit/background_cockpit_nav.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%; */
}
.cockpit-iframe {
  width: 100%;
}
.cockpit-trans {
  background-color: transparent;
  position: fixed;
  width: 100%;
  height: 100%;
}
</style>
